<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/手机号登陆.css" />
    <link rel="stylesheet" href="./less/手机号登陆.less" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
  </head>
  <body>
    <div id="app">
      <!--头部 -->
      <header>
        <div class="box">
          <i class="iconfont icon-xiangzuojiantou"></i>
          <span></span>
        </div>
        <div class="box1"><h3>会员登陆</h3></div>
      </header>

      <!-- 主体 -->
      <main>
        <div class="box3">
          <div class="ha">
            <span class="phone">手机号登陆</span>
            <span class="title">未注册的手机号登录后将自动注册</span>
          </div>
          <div class="form">
            <div class="item">
              <input
                type="text"
                placeholder="请输入您的手机号"
                v-model="phone"
              />
            </div>
            <div class="item">
              <input
                name="password"
                type="text"
                placeholder="请输入图形验证码"
                v-model="img"
              />
              <img :src="imgUrl" alt="" @click="left" />
            </div>
            <div class="item">
              <input
                type="text"
                name="message"
                placeholder="请输入短信验证码"
                v-model="info"
              />
              <span class="pppp" @click="get">获取验证码</span>
            </div>
            <div class="button" @click="login">
              <span>登录</span>
            </div>
          </div>
        </div>
      </main>
    </div>
    <!-- <script src="./js/登录.js"></script> -->
    <script src="./lib/axios.js"></script>
    <script src="./js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          phone: '',
          key: '',
          imgUrl: '',
          img: '',
          info: ''
        },
        created() {
          this.left()
        },
        methods: {
          async left() {
            const res = await axios.get(
              'http://cba.itlike.com/public/index.php?s=/api/captcha/image'
            )
            console.log(res.data.data.key)
            this.imgUrl = res.data.data.base64
            this.key = res.data.data.key
          },

          // 获取短信验证码
          async get() {
            try {
              const res = await axios.post(
                'http://cba.itlike.com/public/index.php?s=/api/captcha/sendSmsCaptcha',
                {
                  form: {
                    captchaCode: this.img,
                    captchaKey: this.key,
                    mobile: this.phone
                  }
                }
              )
              console.log(res)

              if (res.data.status === 200) {
                let flag = true
                if (flag) {
                  flag = false
                  let timer
                  let i = 60
                  timer = setInterval(function () {
                    i--
                    document.querySelector(
                      '.pppp'
                    ).innerHTML = `重新发送(${i})秒`
                    if (i === 0) {
                      flag = true
                      clearInterval(timer)
                      document.querySelector('.pppp').innerHTML = `重新获取`
                    }
                  }, 1000)
                }
              } else {
                alert(res.data.message)
              }
            } catch (error) {
              alert(error)
            }
          },

          // 登录
          async login() {
            try {
              const res = await axios.post(
                'http://cba.itlike.com/public/index.php?s=/api/passport/login',
                {
                  form: {
                    smsCode: this.info,
                    mobile: this.phone,
                    partyData: {},
                    isParty: false
                  }
                },
                {
                  headers: { platform: 'H5' }
                }
              )
              console.log(res)
              if (res.data.status === 200) {
                location.href = './首页.html'
              }
            } catch (error) {
              console.log(error)
              alert(error.message)
            }
          }
        }
      })
    </script>
  </body>
</html>
